import React, {Component} from 'react';

function WarningBanner(props) {
    if (!props.warn) {
        return null;
    }

    return (
        <div className="warning">
            Warning!
        </div>
    );
}

function ListItem(props) {
    return <li>{props.value}</li>
}

function NumberList(props) {
    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) =>
        <ListItem value={number} key={number.toString()}/>
    );
    return (<ul>{listItems}</ul>)
}

export class Page extends Component {
    constructor(props) {
        super(props);
        this.state = {showWarning: true};
        this.handleToggleClick = this.handleToggleClick.bind(this);
    }

    handleToggleClick() {
        this.setState(prevState=>({
            showWarning: !prevState.showWarning
        }));
    }

    render() {

        return (
            <div>
                <WarningBanner warn={this.state.showWarning}/>
                <button onClick={this.handleToggleClick}>
                    {this.state.showWarning?'Hide':'Show'}
                </button>
                <NumberList/>
            </div>
        );
    }
}